<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件函数this属性(Event function this property)</title>
  <!-- 
  在JavaScript中，this 关键字的值在不同的上下文中会有所不同。在事件处理函数中，this 的值通常指向触发事件的元素。
  一、this 的基本概念
  - this 是一个指向对象的引用，表示当前执行上下文中的对象。
  - 在事件处理函数中，this 通常指向绑定事件的元素，即触发事件的DOM元素。

  二、this 在事件处理中的用法
  1. 默认行为：在事件处理函数中，this 指向触发事件的元素。
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      console.log(this); // 输出: <button id="myButton">...</button>
    });
  2. 使用箭头函数：
    - 箭头函数不会创建自己的this 上下文，因此在箭头函数中，this 的值是从外部上下文继承的。通常情况下，使用箭头函数时，this 不会指向事件触发的元素。
    const button = document.getElementById('myButton');
    button.addEventListener('click', () => {
      console.log(this); // 输出: window（在非严格模式下）或 undefined（在严格模式下）
    });

  三、使用bind)` 方法
  - 可以使用bind)` 方法显式地设置this 的值。通过bind)` ，可以将事件处理函数的this 绑定到特定的对象。
  const obj = {
    name: 'My Object'
  };

  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    console.log(this.name); // 输出: "My Object"
  }.bind(obj)); // 绑定this为obj

  四、总结
  - 在事件处理函数中，this 通常指向触发事件的DOM元素。
  - 使用箭头函数时，this 不会指向事件元素，而是继承自外部上下文。
  - 可以使用bind)` 方法显式设置this 的值，以便在事件处理函数中使用。
   -->
</head>
<body>

  <h3>1. this默认行为</h3>
  <div class="event-this">
    <button class="btn-this">事件函数this属性(Event function this property)</button>
  </div>

  <h3>2. this箭头函数</h3>
  <div class="event-arrow">
    <button class="btn-arrow">事件函数this属性(Event function this property)</button>
  </div>

  <h3>3. thisbind方法</h3>
  <div class="event-bind">
    <button class="btn-bind">事件函数this属性(Event function this property)</button>
  </div>

  <script>

    // 1. this默认指向
    console.log("1. this默认指向", this);
    
    // 2. 默认行为：在事件处理函数中，this 指向触发事件的元素。
    const eventThisEl = document.querySelector('.event-this');
    const buttonEl = document.querySelector('.btn-this');

    eventThisEl.addEventListener('click', function(event) {
      console.log("eventThisEl",  this, eventThisEl)
      console.log("eventThisEl", event.currentTarget);
      console.log("eventThisEl", event.target);
      console.log("eventThisEl", event.currentTarget === event.target);
      console.log("eventThisEl", this === eventThisEl);
    })

    buttonEl.addEventListener('click', function(event) {
      console.log("buttonEl", this); // 输出: <button class="btn-this">事件函数this属性(Event function this property)</button>
      console.log("buttonEl", buttonEl); // 输出: <button class="btn-this">事件函数this属性(Event function this property)</button>
      console.log("buttonEl", this === buttonEl); // 输出: true
    });

    // 3. this箭头函数
    const btnArrowEl = document.querySelector('.btn-arrow');
    btnArrowEl.addEventListener('click', () => {
      console.log("buttonEl", this); // 输出: window
    });

    // 4. thisbind方法
    const obj = {
      name: 'My Object'
    };

    const btnBindEl = document.querySelector('.btn-bind');
    btnBindEl.addEventListener('click', function() {
      console.log("btnBindEl", this.name); // 输出: "My Object"
    }.bind(obj)); // 绑定this为obj
    
  </script>
  
</body>
</html>